<template>
  <div id="app">
    <nav>
      <div>
      <strong style="font-size: 48px;">物找人系统</strong>
      <router-link to="/home">首页</router-link>
      <router-link to="/search">学生查询</router-link>
      <select v-model="selectedRoute" @change="navigateToRoute" style="font-size: 32px;border:none;width: 160px;color: #2c3e50;">
          <option value="/admin" :style="getOptionStyle('/admin')">授权管理</option>
          <option value="/log" :style="getOptionStyle('/log')">日志记录</option>
      </select>
      <router-link to="/user">个人中心</router-link>
      <router-link to="/aboutUs">关于我们</router-link>
      <router-link to="/test">测试</router-link>
      <div style="display: inline-block; float: right;" class="hover-container">
          <!-- 图标部分 -->
          <span class="hover-trigger">
            <a class="el-icon-s-operation" />
          </span>
          <!-- 隐藏的按钮部分 -->
          <div class="logout-button"><el-button @click="logout" >登出</el-button></div>
        </div>
      </div>
    </nav>
    <router-view/>
  </div>
</template>

<script>
import { getLocal } from "@/common/utils"
export default {
  data() {
    return {
      selectedRoute: '/admin'  // 默认选择的路由
    };
  },
  methods: {
    logout(){
      if(this.$route.path==="/login")
        alert('您未登录系统，没有可退出的账号')
      else {
        this.$store.commit('logout');
        this.$router.replace("/login");
        alert('登出成功');
      }
    },
    navigateToRoute() {
      // 路由跳转到选择的页面
      if (this.$route.path !== this.selectedRoute && getLocal("token") !== null) {
        this.$router.push(this.selectedRoute);
      }
    },
    getOptionStyle(route) {
      return this.selectedRoute === route;
    }
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 100%;
  height: 100vh;  /* 确保高度为视口高度 */
  box-sizing: border-box;
  overflow: hidden; /* 防止溢出 */
}

nav {
  padding: 24px;
  text-align: left;
  font-size: 32px;
}

nav a {
  font-weight: normal;
  color: #2c3e50;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  width: 160px;
}

nav a.router-link-exact-active {
  color: #4e52d6;
}

/* 父容器样式 */
.hover-container {
  position: relative;
  display: inline-block;
}

.hover-container:hover .logout-button {
      opacity: 1;
      visibility: visible;
    }

/* 隐藏登出按钮 */
.logout-button {
  padding: 10px;
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
}

.el-icon-s-operation:hover option.active{
  color: #4e52d6;
}
</style>
